<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>address_list</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        .address-list-item {
            margin: 15px 15px 0;
            position: relative;
            height: 130px;
            /* box-shadow: 0 0 10px #ddd; */
        }

        .address-list-item-inner {
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 4px;
            height: 130px;
            background-color: white;
        }

        .address-list-item-left {
            flex: 1;
            margin-left: 15px;
        }

        .address-list-item-right {
            justify-content: center;
            padding: 10px 15px;
        }

        .address-list-item-right-icon {
            width: 18px;
            height: 18px;
        }


        .address-list-def-img {
            width: 100%;
            height: 100%;
        }

        .address-list-item-nav {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .address-list-item-name {
            font-size: 15px;
            color: #333333;
        }

        .address-list-item-phone {
            font-size: 14px;
            color: #777777;
        }

        .address-list-item-content {
            height: 50px;
            line-height: 25px;
            font-size: 15px;
            margin-top: 5px;
            color: #333333;
        }
    </style>
</head>

<body>
    <div class="page" @vue:mounted="mounted">
        <div class="nav-bar">
            <div onclick="core.back()" class="nav-bar-back">

                <span class="icon iconfont icon-fanhui m_r_10"></span>
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">收货地址</span>

        </div>
        <!-- <span class=" mauto  mt10  p12 w100px h30 backCBlue textac br2 Cwhite lh30" @click="fnAdd( )">新增</span> -->
        <div class="address-list ">
            <div class="address-list-item " v-for="item of data.list">
                <div class="address-list-item-inner">

                    <div class="address-list-item-left ">
                        <div class="address-list-item-nav">
                            <span class="address-list-item-name " @click="fnHit(item)">{{item.name}}</span>
                            <span class="address-list-item-phone " @click="fnHit(item)">{{item.phone}}</span>
                        </div>
                        <span class="address-list-item-content " @click="fnHit(item)">{{item.qustr}}</span>
                        <span class="address-list-item-content " @click="fnHit(item)">{{item.address}}</span>
                    </div>
                    <div class="address-list-item-right " data="index" @click="editAddress( item)">
                        编辑
                    </div>
                </div>
            </div>
        </div>
        <span class=" mauto  mt20   p12 w100px h30 backCBlue textac br2 Cwhite lh30" @click="fnAdd( )">新增</span>
    </div>
</body>

<script src="../script/api.js"></script>
<script src="../script/common.js"></script>

<script type="module">
    import { createApp } from 'https://www.chenxiangle.com/app/web/script/pvue.js'
    const APP = () => {
        createApp({
            data: {
                list: [],
                selectPage: false
            },
            async getData() {

                let res = await core.post("api/tuser/userdata", {});
                core.log('所有收货地址')
                core.log(res)
                var l = [];
                for (var i in res) {
                    var r = JSON.parse(res[i].data);

                    var d = {
                        id: res[i].id,
                        name: r.name,
                        phone: r.phone,
                        qustr: r.qustr,
                        address: r.address,
                    };

                    l.push(d);
                }

                this.data.list = l;


                let id = core.getParam("id");

                if (id > 0) {
                    console.log("select >>>>>>>>>>>>>>>> ");
                    this.data.selectPage = true;
                }

            },

            editAddress(item) {

                api.openWin({
                    name: 'edit_address',
                    url: './edit_address.html',
                    pageParam: item
                })
            }

            , fnAdd() {
                let dt = { id: 0 };
                api.openWin({
                    name: 'edit_address',
                    url: './edit_address.html',
                    pageParam: dt
                })
            }
            ,
            async fnHit(item) {

                let id = item.id;

                console.log(id);
                var dt = { id: id };

                let res = await core.post("api/tuser/userDataHit", dt);
                if (this.data.selectPage) {
                    console.log("return page . init addr ");
                    api.execScript({
                        name: 'place_order',
                        script: 'initAddr(); '
                    });
                    core.back();
                }

            },



            mounted() {
                this.getData();
                window.getData = this.getData;
            }
        }).mount()
    }
    window.APP = APP;
    window.apiready = () => {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
    }
</script>
<script>






    function phoneHash(phone) {
        if (!phone) { return '' }
        phone = phone.substring(0, 3) + "****" + phone.substring(7);
        return phone;
    }

</script>

</html>